<script setup>
import { Menu, SemiSelect } from "@element-plus/icons-vue";
import { ref } from "vue";
import { Close } from "@element-plus/icons-vue";
import { updateCallLog } from "@/api/customer";
import { message } from "@/utils/message";
import ReQrcode from "@/components/ReQrcode";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const props = defineProps({
  callShow: {
    type: Boolean,
    default: false
  },
  each_status: {
    type: String,
    default: "pc"
  },
  customerData: {
    type: Object,
    default: {}
  },
  callInfo: {
    type: Object,
    default: {
      status: 0 // 默认未开始拨打电话
    }
  },
  uuid: {
    type: String,
    default: ""
  }
});
// 定义 emit 事件
const emit = defineEmits(["update:callShow", "callPhone", "next"]);
const formatCallDuration = milliseconds => {
  const seconds = Math.floor(milliseconds / 1000);
  const minutes = Math.floor(seconds / 60);
  const remainingSeconds = seconds % 60;

  if (minutes > 0) {
    return `${minutes}分${remainingSeconds}秒`;
  }
  return `${seconds}秒`;
};
// 保存信息
function changeInfo() {
  updateCallLog({
    customer_id: props.customerData.id,
    uuid: props.uuid,
    intension: intension.value,
    content: textarea.value,
    table_at: props.customerData.table_at
  }).then(res => {
    if (res.code == 1000) {
      message(`操作成功！`, { type: "success" });
      emit("next");
    }
  });
}
function changeNext(type) {
  // console.log(props.callInfo)
  if(type){
    if (!intension.value) return message(`请选择意向！`, { type: "warning" });
    emit("next");
  }else{
    emit("next");
  }
  
}
// 打开下载弹框
const showVersion = ref(false);
const intension = ref("");
const textarea = ref("");
// 关闭方法
const closeCallShow = () => {
  if (props.callInfo.status == 3) {
    if (intension.value) {
      emit("update:callShow", false);
    } else {
      message(`请选择意向！`, { type: "error" });
    }
  } else {
    emit("update:callShow", false);
  }
};
// 拨打电话
const changeCallPhone = () => {
  emit("callPhone");
};
</script>

<template>
  <div
    v-if="callShow"
    class="fixed bg-[#409EFF] top-30 right-50 z-[2036] w-[340px] rounded-lg"
  >
    <div
      class="flex justify-between items-center p-[18px] pt-[10px] pb-[0] text-[#fff]"
    >
      <div class="flex items-center">
        <el-icon><Menu /></el-icon>
        <div class="text-[13px] ml-[10px]">智能手机</div>
      </div>
      <el-icon @click="closeCallShow"><SemiSelect /></el-icon>
    </div>
    <!-- APP不在线情况 -->
    <div class="p-[18px] h-[520px]" v-if="each_status == '_pc_' || each_status == ''">
      <div
        class="bg-[#fff] w-[100%] h-[100%] p-[18px] rounded-lg text-center relative"
      >
        <img src="@/assets/null.webp" class="w-[200px] h-[200px]" alt="" />
        <div class="text-[15px] mb-[14px]">
          目前无法使用手机拨打，请检查后重试
        </div>
        <div class="text-left text-[12px]">
          1、请在手机上打开并登陆帮企企CRM的APP。若您尚未安装该客户端，请<span
            class="text-[#409EFF]"
            @click="showVersion = true"
            >点击此处下载</span
          >。
        </div>
        <div class="text-left text-[12px] mt-[6px]">
          2、若您在手机上已打开帮企企CRM的APP，请确认该应用在前台运行。
        </div>
        <!-- 测试服App下载页 : https://test.wxbqq.com/crm_h5 -->
        <!-- 正式服App下载页 : https://crm.wxbqq.com/crm_h5 -->
        <div v-if="showVersion" class="bg-[#fff] p-[30px] absolute top-[40px]">
          <div class="text-[14px] mb-[10px]">请扫码下载app</div>
          <ReQrcode :text="t('https://crm.wxbqq.com/crm_h5')" />
          <div @click="showVersion = false">
            <el-icon :size="24"><Close /></el-icon>
          </div>
        </div>
      </div>
    </div>
    <!-- app/pc双方均在线情况 -->
    <div v-else>
      <!-- APP端拨打中 -->
      <div class="p-[18px] h-[520px]" v-if="callInfo.status == 2">
        <div
          class="bg-[#fff] w-[100%] h-[100%] p-[18px] rounded-lg text-center"
        >
          <div class="bg-[#F5F5F5] rounded-lg p-[10px] mb-[20px]">
            <div class="text-[13px] text-left text-[#409EFF]">
              正在使用手机外呼，请注意开启手机录音
            </div>
            <div class="text-[15px] text-left">{{ customerData.phone }}</div>
          </div>
          <div class="text-left text-[#409EFF] text-[17px] font-black">
            {{ customerData.name }}
          </div>
          <div class="text-left text-[13px]">
            {{ customerData.company_name }}
          </div>
        </div>
      </div>
      <!-- APP未接通 -->
       <div class="p-[18px] h-[520px]" v-if="callInfo.status == 5">
        <div
          class="bg-[#fff] w-[100%] h-[100%] p-[18px] rounded-lg text-center"
        >
          <div
            class="bg-[#F5F5F5] rounded-lg p-[10px] mb-[20px] flex justify-between items-center"
          >
            <div>
              <div class="text-left text-[#999999] text-[13px]">
                去电对方拒接或未接听
              </div>
              <div class="text-left text-[15px]">{{ customerData.phone }}</div>
            </div>
            <img
              class="w-[50px] h-[50px]"
              src="@/assets/phone.png"
              alt=""
              @click="changeCallPhone"
            />
            <img
              src="@/assets/next.png"
              alt=""
              class="w-[50px] h-[50px]"
              @click="changeNext(false)"
            />
            
          </div>
          <div class="text-left text-[#409EFF] text-[17px] font-black">
            {{ customerData.name }}
          </div>
          <div class="text-left text-[13px]">
            {{ customerData.company_name }}
          </div>
        </div>
      </div>
      <!-- APP拨打完成后 -->
      <div
        class="p-[18px] h-[520px]"
        v-if="callInfo.status == 3"
      >
        <div
          class="bg-[#fff] w-[100%] h-[100%] p-[18px] rounded-lg text-center"
        >
          <div
            class="bg-[#F5F5F5] rounded-lg p-[10px] mb-[20px] flex justify-between items-center"
          >
            <div>
              <div class="text-left text-[#999999] text-[13px]">
                已挂断，通话时长{{ formatCallDuration(callInfo.info.duration) }}
              </div>
              <div class="text-left text-[15px]">{{ customerData.phone }}</div>
            </div>
            <img
              src="@/assets/next.png"
              alt=""
              class="w-[50px] h-[50px]"
              @click="changeNext(true)"
            />
          </div>
          <div class="text-left text-[#409EFF] text-[17px] font-black">
            {{ customerData.name }}
          </div>
          <div class="text-left text-[13px] mb-[30px]">
            {{ customerData.company_name }}
          </div>
          <div class="text-left text-[14px] mb-[10px]">
            <span class="text-[red]">*</span>话单意向标记：
          </div>
          <div class="text-left">
            <el-radio-group v-model="intension">
              <el-radio-button label="unknown">接通未确定</el-radio-button>
              <el-radio-button label="refuse">无意向</el-radio-button>
              <el-radio-button label="intend">有意向</el-radio-button>
            </el-radio-group>
          </div>
          <div class="text-left text-[14px] mb-[10px] mt-[10px]">
            跟进记录：
          </div>
          <el-input
            v-model="textarea"
            :rows="2"
            type="textarea"
            placeholder="请输入"
          />
          <div class="h-[30px]"></div>
          <el-button type="primary" @click="changeInfo">保存信息</el-button>
        </div>
      </div>
      <!-- APP在线情况，点击列表拨打按钮 -->
      <div class="p-[18px] h-[520px]" v-if="callInfo.status == 0">
        <div
          class="bg-[#fff] w-[100%] h-[100%] p-[18px] rounded-lg text-center"
        >
          <div
            class="bg-[#F5F5F5] flex justify-between items-center rounded-lg p-[10px] mb-[20px]"
          >
            <div class="text-[15px]">{{ customerData.phone }}</div>
            <img
              class="w-[50px] h-[50px]"
              src="@/assets/phone.png"
              alt=""
              @click="changeCallPhone"
            />
          </div>
          <div class="text-left text-[#409EFF] text-[17px] font-black">
            {{ customerData.name }}
          </div>
          <div class="text-left text-[13px]">
            {{ customerData.company_name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<style lang="sass"></style>
